<template>
  <div class="user-chat">
      <van-nav-bar class="app-nav-bar" title="智能聊天机器人" left-arrow @click-left="router.back()" />
      <van-cell-group class="msg-wrap-list">
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
          <van-cell title="单元格"></van-cell>
      </van-cell-group>
      <van-cell-group class="msg-wrap">
          <van-field :border="false" v-model="message" placeholder="请输入消息内容"></van-field>
          <van-button type="success" size="small" @click="onSenMsg">发送</van-button>
      </van-cell-group>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import io from 'socket.io-client'


let socket = io("/api")

socket.on('connect', () => {
    console.log("连接建立成功了");
})

socket.on('disconnect', () => {
    console.log("断开连接了");
})

const message = ref<string>("")
const router = useRouter()

const onSenMsg = () => {
    socket.emit('message', {
        msg: message,
        timestamp: Date.now()
    })
}

</script>

<style lang="scss" scoped>

    .user-chat {
        .msg-wrap {
            display: flex;
            padding: 0 14px;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            align-items: center;

            .van-button {
                min-width: 50px;
            }
        }

        ::v-deep  .msg-wrap-list {
            position:fixed;
            left: 0;
            right: 0;
            top: 46px;
            bottom: 44px;
            overflow-y: auto;
        }
    }
</style>